<template>
  <div
    :style="{
      padding: '24px',
      background: '#fff',
      postion: 'absolute',
      height: '90%',
    }"
  >
    <a-space direction="vertical" size="Large">
      <div>
        <a-form-model layout="inline" :model="formInline">
          <a-form-model-item label="学生姓名:">
            <a-input v-model="formInline.name" placeholder="根据学生姓名查询">
            </a-input>
          </a-form-model-item>
          <a-form-model-item label="年级:">
            <a-select
              v-model="formInline.grade"
              placeholder="根据年级查询"
              style="width: 180px"
              @select="handleSelect"
            >
              <a-select-option
                v-for="item in gradelist"
                :key="item"
                :value="item"
              >
                {{ item }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="班级:">
            <a-select
              v-model="formInline.classname"
              placeholder="根据班级查询"
              style="width: 180px"
            >
              <a-select-option
                v-for="(item, index) in classlist"
                :key="index"
                :value="index"
              >
                {{ item }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item>
            <a-button type="primary" @click="find"> 查询 </a-button>
          </a-form-model-item>
          <a-form-model-item>
            <a-button @click="resetForm()">重置</a-button>
          </a-form-model-item>
          <a-form-model-item>
            <a-button type="link" v-show="showSrech" @click="changShow()">
              展开 <a-icon type="down"
            /></a-button>
            <a-button type="link" v-show="!showSrech" @click="changShow()">
              收起 <a-icon type="up"
            /></a-button>
          </a-form-model-item>
          <a-form-model-item label="学生性别:" v-show="!showSrech">
            <a-radio-group button-style="solid" v-model="formInline.sex">
              <a-radio-button value="0"> 男 </a-radio-button>
              <a-radio-button value="1"> 女 </a-radio-button>
            </a-radio-group>
          </a-form-model-item>
          <a-form-model-item label="学生年龄:" v-show="!showSrech">
            <a-input
              v-model="formInline.age"
              placeholder="根据学生年龄查询"
              style="width: 280px"
            >
            </a-input>
          </a-form-model-item>
          <a-form-model-item label="成绩:" v-show="!showSrech">
            <a-slider
              range
              :default-value="[0, 300]"
              :disabled="false"
              style="width: 200px"
              :min="0"
              :max="300"
              @afterChange="slideronAfterChange"
              :step="1"
            />
          </a-form-model-item>
        </a-form-model>
      </div>

      <div style="width: 100%; margin-top: 10px">
        <a-alert
          :message="
            '已选择: ' +
            this.selectNum +
            ' 服务调用次数总计 ' +
            this.selectAllSevers +
            ' 次'
          "
          type="info"
          show-icon
        />
      </div>

      <div>
        <a-table
          :columns="columns"
          :data-source="data"
          :row-selection="rowSelection"
          @change="onChange"
          :loading="spin"
        >
          <span slot="sex" slot-scope="text">
            <span v-if="text == 0">男</span>
            <span v-else-if="text == 1">女</span>
          </span>

          <span slot="score" slot-scope="text">{{ text }}分</span>
        </a-table>
      </div>
    </a-space>
  </div>
</template>

<script>
const columns = [
  {
    title: "#",
    dataIndex: "id",
    key: "id",
    // id自增
    customRender: function (text, record, index) {
      return index + 1;
    },
  },
  {
    title: "姓名",
    dataIndex: "name",
    key: "name",
  },
  {
    title: "性别",
    dataIndex: "sex",
    key: "sex",
    scopedSlots: { customRender: "sex" },
  },
  {
    title: "年龄",
    dataIndex: "age",
    key: "age",
    scopedSlots: { customRender: "age" },
    sorter: (a, b) => {
      let aAge = a.age - 0;
      let bAge = b.age - 0;
      return aAge - bAge;
    },
    // 支持的排序方式
    // 默认点击排序按钮是：无排序、顺序、倒序、
    sortDirections: ["descend", "ascend", ""],
    // 配置默认是无序
    defaultSortOrder: "",
  },
  {
    title: "年级",
    dataIndex: "grade",
    key: "grade",
    ellipsis: true,
    scopedSlots: { customRender: "grade" },
  },
  {
    title: "班级",
    dataIndex: "aclass",
    key: "aclass",
    ellipsis: true,
    scopedSlots: { customRender: "classname" },
  },
  {
    title: "课程",
    dataIndex: "curriculum",
    key: "curriculum",
    ellipsis: true,
    scopedSlots: { customRender: "curr" },
  },
      {
    title: "学期",
    dataIndex: "term",
    key: "term",
    ellipsis: true,
    scopedSlots: { customRender: "term" },
  },
  {
    title: "成绩",
    dataIndex: "score",
    key: "score",
    scopedSlots: { customRender: "score" },
    sorter: (a, b) => {
      let aScore = a.score - 0;
      let bScore = b.score - 0;
      return aScore - bScore;
    },
    sortDirections: ["descend", "ascend", ""],
    defaultSortOrder: "",
  },
];

import { getStudentsOfCurr, getGrade, getClass } from "@/utils/api";
export default {
  name: "StudentsOfCurr",
  components: {},
  data() {
    return {
      formInline: {
        teacher: "",
        name: "",
        sex: "",
        age: "",
        grade: "",
        classname: "",
        term: "",
        min: "",
        max: "",
      },
      gradelist: [""],
      classlist: [""],
      layout: {
        labelCol: { span: 5 },
        wrapperCol: { span: 15 },
      },
      data: [],
      columns,
      selectNum: 0,
      selectAllSevers: 0,
      selectedRowKeys: [],
      visible: false,
      confirmLoading: false,
      showSrech: true,
      curriculumName: [],
      spin: false,
    };
  },
  created() {
    const params = new URLSearchParams();
    params.append("teacherid", this.$store.state.userinfo.tno);
    getGrade(params).then((res) => {
      this.gradelist = res.data;
    });
    this.find();
  },
  computed: {
    rowSelection() {
      const { selectedRowKeys } = this; // selectedRowKeys和取消选中有关，我也看不懂
      return {
        selectedRowKeys,
        onChange: (selectedRowKeys, selectedRows) => {
          this.selectedRowKeys = selectedRowKeys;
          this.selectNum = selectedRows.length;
          // 清空变量后再计算，即每一次变动都从新计算所有次数
          let allSevers = 0;
          for (let i = 0; i < this.selectNum; i++) {
            allSevers += selectedRows[i].score - 0;
          }
          this.selectAllSevers = allSevers;
        },
      };
    },
  },
  methods: {
    onChange() {
      this.selectNum = 0;
      this.selectAllSevers = 0;
      this.selectedRowKeys = []; //取消可选
    },
    // 当年级被选中时查询该年级的班级
    handleSelect(value) {
      const params = new URLSearchParams();
      params.append("teacherid", this.teacher.tno);
      params.append("grade", value);
      getClass(params).then((res) => {
        this.classlist = res.data;
      });
    },
    // 改变展开状态
    changShow() {
      this.showSrech = !this.showSrech;
    },
    // 查询表单查询
    find() {
      this.spin = true;
      this.formInline.teacherid = this.$store.state.userinfo.tno;
      getStudentsOfCurr(this.formInline).then((res) => {
        this.$nextTick(() => {
          this.spin = false;
          this.data = res.data;
        });
      });
    },
    // 查询表单重置
    resetForm() {
      this.formInline = {};
    },
    // 滑动输入条
    slideronAfterChange(value) {
      this.formInline.min = value[0];
      this.formInline.max = value[1];
    },
  },
};
</script>
<style>
</style>